import {
	ref,
	h,
	Teleport,
	computed,

} from 'vue'
import DbantIcon from '../dbant-icon.vue'
import './dbant-navbar.css'
export default {
	props: {
		direction: {
			type: String,
			default: ''
		},
		reverse: {
			type: Boolean,
			default: false
		},
		defaultSelect: {
			type: Number,
			default: 0
		},
		allowClose: {
			type: Boolean,
			default: true
		},
		spliter: Boolean,
		value: Array,
		to: HTMLElement,
		renderItem: Function
	},
	setup(props, context) {
		const selectIndex = ref(props.defaultSelect)
		return {
			slots: computed(() => {
				if (props.renderItem) {
					return props.renderItem(h);
				}
				return context.slots.default()
			}),
			navbars: computed(() => {
				if (props.renderItem) {
					return props.renderItem(h).flatMap(it => {
						return it.props
					});
				}
				return context.slots.default().flatMap(it => it.props)
			}),
			selectIndex
		}
	},
	methods: {
		select(index) {
			this.selectIndex = index
		}
	},
	 render() {
		const renderSvg = word => {
			const pathId = parseInt(Math.random() * 100000000)
			const height = word.length * 6
			return h('svg', {
				xmlns: 'http://www.w3.org/2000/svg',
				version: '1.1',
				width: 22,
				height
			}, [
				h('defs', h('path', {
					id: `path-text-${pathId}`,
					d: this.reverse ? `M6,0 L6,${height}` : `M14,${height} L14,0`
				})),
				h('text', {
					fill: 'var(--main-color)'
				}, h('textPath', {
					'xlink:href': `#path-text-${pathId}`
				}, word))
			])
		}
		const splitTitle = (title) => {
			if (this.spliter && this.direction === 'vertical' && title.match(/\w/g)) {
				const elements = [];
				let last = ''
				let flag = 1
				let lastFlag
				const words = title.split('')
				for (let i = 0, len = words.length; i < len; i++) {
					const word = words[i]
					flag = word.match(/\w/) ? 1 : 2
					if (flag == lastFlag) {
						last += word
					} else {
						last && elements.push(lastFlag === 1 ? renderSvg(last) : last)
						last = word
					}
					lastFlag = flag
				}
				last && elements.push(lastFlag === 1 ? renderSvg(last) : last)
				return elements
			}
			return [title];
		}


		const childs = [h('ul', {
			class: 'magic-navbar-header none-select'
		}, this.navbars.map((navbar, index) => {
			if (navbar == null) {
				this.slots[index]
			}
			const elements = [h('div', {
				class: 'magic-navbar-title'
			}, [...splitTitle(navbar.title)])]
			if (navbar.icon) {
				elements.push(h(DbantIcon, {
					icon: navbar.icon
				}))
			}
			const style = navbar.style || {}
			if (navbar.show === false) {
				style['display'] = 'none'
			}
			return h('li', {
				class: this.selectIndex === index ? 'selected' : '',
				style,
				onClick: () => {
					if (this.selectIndex === index && this.allowClose) {
						this.selectIndex = -1
					} else {
						this.selectIndex = index
					}
				}
			}, elements)
		}))]
	
		this.slots.forEach((slot, index) => {
			const style = index !== this.selectIndex || slot.props.show === false ? {
				display: 'none'
			} : {};
			if (this.to) {
				childs.push(h(Teleport, {
					to: this.to
				}, h('div', {
					class: "magic-navbar-body",
					style
				}, slot)))
			} else {
				childs.push(h('div', {
					class: 'magic-navbar-body',
					style
				}, slot))
			}

		})

		return h('div', {
			class: `magic-navbar magic-navbar__${this.direction}` + (this.reverse ? ' reverse' : '')
		}, childs)
	}
}
